import React, { PureComponent } from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native'
import color from '../../../utils/color'
import screen from '../../../utils/screen'

const styles = StyleSheet.create({
  tab: {
    width: screen.pxToDp(150),
    alignItems: 'center',
    justifyContent: 'center',
  },

  tabs: {
    height: 50,
    backgroundColor: color.theme,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
});

export default class extends PureComponent {
  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array
  }

  renderTabOption(name, page) {
    const isTabActive = this.props.activeTab === page;
    return (
      <TouchableOpacity key={name} onPress={() => this.props.goToPage(page)}>
        <View style={[styles.tab]}>
          <Text style={{color: isTabActive ? 'navy' : 'black', fontWeight: isTabActive ? 'bold' : 'normal'}}>{name}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  setAnimationValue(value) {
  }

  render() {
    const numberOfTabs = this.props.tabs.length;
    return (
      <View style={styles.tabs}>
        {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
      </View>
    );
  }
}
